<template>
	<view class="item">
		<view class="item__left">
			<image class="item-pic"
				src="https://pic.maizuo.com/usr/movie/cdb02da94636d6af448b95e1d322615b.jpg?x-oss-process=image/quality,Q_70">
			</image>
		</view>
		<view class="item__center">
			<view class="item-title">百变马丁</view>
		</view>
		<view class="item__right">
			<button class="item-btn">购票</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
</script>

<!-- scoped 不用添加，在H5平台会自动添加 -->
<style lang="scss">
	.item {
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ccc;
		background-color: #fff;

		&__left {
			width: 132rpx;
		}

		&__center {
			flex: 1;
		}

		&__right {
			width: 100rpx;
		}
		
		&-pic {
			width: 100%;
			height: 184rpx;
		}

		&-btn {
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 26rpx;
			text-align: center;
			border-radius: 4rpx;
		}
	}
</style>